<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <u-sticky :customNavHeight="totalHeight">
            <view class="Tab">
                <u-tabs :list="list1" keyName="text" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :lineColor="color" :current="current" :scrollable="false" @click="click"></u-tabs>
            </view>
        </u-sticky>

        <view class="List" v-for="(item, index) in pageData" :key="index">
            <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
            <view class="content" :class="{ 'j-sb': status == 1 || !item.shop_name }">
                <text class="ellipsis black size28">{{ item.name }}</text>
                <text class="color_99 h6">库存：{{ item.stock }}</text>
                <text class="color_99 h6 ellipsis" v-if="status != 1">{{ item.shop_name }}</text>
                <view class="priceBox">
                    <view class="d-flex a-center color_ff4">
                        <text class="h6">￥</text>
                        <text class="size28">{{ item.price }}</text>
                    </view>
                    <view class="Btn" v-if="status == 1" @click="Cancel(item)">取消</view>
                    <view class="Btn" v-else @click="Allocation(item)">分配到当前店铺</view>
                </view>
            </view>
        </view>

        <emptys v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '管理商品',
                shop_id: '',
                status: 1, // 1：已分配 2：占用中 3：未分配
                page: 1,
                limit: 10,
                keywords: '',
                list1: [],
                current: 0,
                getMore: true,
                pageData: []
            };
        },
        onLoad(opt) {
            if (opt.shop_id) this.shop_id = opt.shop_id;
            this.frontShopGoodsNum();
            this.frontShopGoods();
        },
        methods: {
            frontShopGoodsNum() {
                this.$http
                    .get({
                        url: '/BntApi/frontShopGoodsNum',
                        data: {
                            shop_id: this.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        result.forEach((n) => {
                            n.badge = {
                                value: n.num
                            };
                        });
                        this.list1 = result;
                    });
            },
            frontShopGoods() {
                this.$http
                    .get({
                        url: '/BntApi/frontShopGoods',
                        data: {
                            shop_id: this.shop_id,
                            status: this.status,
                            page: this.page,
                            limit: this.limit,
                            keywords: this.keywords
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.limit) this.getMore = false;
                    });
            },
            async Cancel(item) {
                const index = this.pageData.findIndex((n) => n.goods_id == item.goods_id);
                const result = await this.$Modals('提示', '是否确定取消');
                if (!result) return;
                this.saveFrontShopGoods(item.goods_id, 0, index);
            },

            async Allocation(item) {
                const result = await this.$Modals('提示', '是否确定分配');
                if (!result) return;
                this.saveFrontShopGoods(item.goods_id, this.shop_id);
            },

            saveFrontShopGoods(goods_id, shop_id, index) {
                this.$http
                    .post({
                        url: '/BntApi/saveFrontShopGoods',
                        data: {
                            goods_id,
                            shop_id
                        }
                    })
                    .then((res) => {
                        this.$Toast(res.msg);
                        if (res.code != 200) return;
                        this.pageData.splice(index, 1);
                        this.frontShopGoodsNum();
                    });
            },

            click(e) {
                this.current = e.index;
                this.status = e.status;
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.frontShopGoods();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.frontShopGoods();
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            activeStyle() {
                return {
                    color: this.color,
                    fontSize: '30rpx'
                };
            },
            inactiveStyle() {
                return {
                    color: '#999'
                };
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 24rpx;
    }
</style>
<style lang="scss" scoped>
    .Tab {
        width: 100%;
        height: 80rpx;
        background-color: #fff;
        border-top: 1px solid #f1f1f1;
    }
    .List {
        width: 710rpx;
        background-color: #fff;
        padding: 24rpx;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        display: flex;

        .Img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            min-height: 140rpx;
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            .priceBox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .Btn {
                background-color: #169bd5;
                color: #fff;
                padding: 6rpx 26rpx;
                border-radius: 20rpx;
            }
        }
    }
</style>
